<template>
  <div class="page-container">
    <div class="content">
      <h1>{{ homeData.title }}</h1>
      
      <div class="city-cards">
        <router-link 
          v-for="city in homeData.cities" 
          :key="city.id"
          :to="city.route" 
          class="city-card"
        >
          <div class="card-image">
            <img :src="city.image" :alt="city.name" />
          </div>
          <div class="card-content">
            <h2>{{ city.name }}</h2>
            <p>{{ city.description }}</p>
          </div>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import data from '../db/data.json'

// 从 JSON 数据中获取首页数据
const homeData = ref(data.home)
</script>
